<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <el-card title="折线图">
          <div class="chart" id="line"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card title="柱状图">
          <div class="chart" id="bar"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card title="折线图">
          <div class="chart" id="pie"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import barOption from "./options/bar-option";
import pie from "./options/pie";
import line from "./options/line";
import request from "@/utils/request";
export default {
  mounted() {
    // 绘制柱状图
    var myChart = echarts.init(document.getElementById("bar"));
    myChart.setOption(barOption);

    //绘制饼状图
    var pieChart = echarts.init(document.getElementById("pie"));
    pieChart.setOption(pie);

    //绘制饼状图
    var lineChart = echarts.init(document.getElementById("line"));
    request.get("classes/VueChart").then((res) => {
      console.log(res);
      let { access, reg } = res.data.results[0];
      line.series[0].data = access;
      line.series[1].data = reg;
      lineChart.setOption(line);
    });
  },
};
</script>

<style lang="scss" scoped>
.chart {
  height: 300px;
  /* border: 1px solid red; */
}
</style>
